<template>
  <layout title="avatar头像">

    <layout-content title="基础使用">
      <view class="tn-flex-row">
        <tn-avatar icon="/static/favicon.ico" :custom-style="avatarCustomStyle"></tn-avatar>
        <tn-avatar :custom-style="avatarCustomStyle">UI</tn-avatar>
        <tn-avatar icon="logo-tuniao" :custom-style="avatarCustomStyle"></tn-avatar>
      </view>
      <view class="tn-flex-row tn-margin-top-sm">
        <tn-avatar shape="square" icon="/static/favicon.ico" :custom-style="avatarCustomStyle"></tn-avatar>
        <tn-avatar shape="square" :custom-style="avatarCustomStyle">UI</tn-avatar>
        <tn-avatar shape="square" icon="logo-tuniao" :custom-style="avatarCustomStyle"></tn-avatar>
      </view>
    </layout-content>

    <layout-content title="设置尺寸">
      <view class="tn-flex-row tn-flex-center-start">
        <tn-avatar size="sm" icon="/static/favicon.ico" :custom-style="avatarCustomStyle"></tn-avatar>
        <tn-avatar icon="logo-tuniao" :custom-style="avatarCustomStyle"></tn-avatar>
        <tn-avatar size="lg" icon="/static/favicon.ico" :custom-style="avatarCustomStyle"></tn-avatar>
        <tn-avatar size="xl" icon="logo-tuniao" :custom-style="avatarCustomStyle"></tn-avatar>
      </view>
      <view class="tn-flex-row tn-flex-center-start">
        <tn-avatar size="sm" :custom-style="avatarCustomStyle">UI</tn-avatar>
        <tn-avatar :custom-style="avatarCustomStyle">UI</tn-avatar>
        <tn-avatar size="lg" :custom-style="avatarCustomStyle">UI</tn-avatar>
        <tn-avatar size="xl" :custom-style="avatarCustomStyle">UI</tn-avatar>
      </view>
      <view class="tn-flex-row tn-flex-center-start">
        <tn-avatar shape="square" size="sm" icon="/static/favicon.ico" :custom-style="avatarCustomStyle"></tn-avatar>
        <tn-avatar shape="square" icon="logo-tuniao" :custom-style="avatarCustomStyle"></tn-avatar>
        <tn-avatar shape="square" size="lg" icon="/static/favicon.ico" :custom-style="avatarCustomStyle"></tn-avatar>
        <tn-avatar shape="square" size="xl" icon="logo-tuniao" :custom-style="avatarCustomStyle"></tn-avatar>
      </view>
      <view class="tn-flex-row tn-flex-center-start">
        <tn-avatar shape="square" size="sm" :custom-style="avatarCustomStyle">UI</tn-avatar>
        <tn-avatar shape="square" :custom-style="avatarCustomStyle">UI</tn-avatar>
        <tn-avatar shape="square" size="lg" :custom-style="avatarCustomStyle">UI</tn-avatar>
        <tn-avatar shape="square" size="xl" :custom-style="avatarCustomStyle">UI</tn-avatar>
      </view>
      <view class="tn-flex-row tn-flex-center-start">
        <tn-avatar size="120" icon="/static/favicon.ico" :custom-style="avatarCustomStyle"></tn-avatar>
        <tn-avatar font-size="60" icon="logo-tuniao" :custom-style="avatarCustomStyle"></tn-avatar>
        <tn-avatar font-bold :custom-style="avatarCustomStyle">UI</tn-avatar>
      </view>
    </layout-content>

    <layout-content title="设置颜色">
      <view class="tn-flex-row tn-flex-center-start">
        <tn-avatar type="primary" :custom-style="avatarCustomStyle">UI</tn-avatar>
        <tn-avatar type="success" icon="logo-tuniao" :custom-style="avatarCustomStyle"></tn-avatar>
        <tn-avatar type="warning" :custom-style="avatarCustomStyle">UI</tn-avatar>
        <tn-avatar type="danger" icon="logo-tuniao" :custom-style="avatarCustomStyle"></tn-avatar>
        <tn-avatar type="info" :custom-style="avatarCustomStyle">UI</tn-avatar>
      </view>
      <view class="tn-flex-row tn-flex-center-start">
        <tn-avatar bg-color="tn-bg-blue" :custom-style="avatarCustomStyle">UI</tn-avatar>
        <tn-avatar bg-color="tn-bg-blue--light" color="tn-color-blue" :custom-style="avatarCustomStyle">UI</tn-avatar>
        <tn-avatar bg-color="tn-cool-bg-6" :custom-style="avatarCustomStyle">UI</tn-avatar>
      </view>
    </layout-content>

    <layout-content title="设置边框">
      <view class="tn-flex-row tn-flex-center-start">
        <tn-avatar border type="primary" :custom-style="avatarCustomStyle">UI</tn-avatar>
        <tn-avatar border type="success" icon="logo-tuniao" :custom-style="avatarCustomStyle"></tn-avatar>
        <tn-avatar border type="warning" :custom-style="avatarCustomStyle">UI</tn-avatar>
        <tn-avatar border type="danger" icon="logo-tuniao" :custom-style="avatarCustomStyle"></tn-avatar>
        <tn-avatar border type="info" :custom-style="avatarCustomStyle">UI</tn-avatar>
      </view>
      <view class="tn-flex-row tn-flex-center-start">
        <tn-avatar border border-color="tn-border-indigo" color="tn-color-indigo" :custom-style="avatarCustomStyle">UI</tn-avatar>
        <tn-avatar border border-bold border-color="tn-border-indigo" color="tn-color-indigo" :custom-style="avatarCustomStyle">UI</tn-avatar>
      </view>
    </layout-content>

    <layout-content title="设置阴影">
      <view class="tn-flex-row tn-flex-center-start">
        <tn-avatar shadow type="primary" :custom-style="avatarCustomStyle">UI</tn-avatar>
        <tn-avatar shadow type="success" icon="logo-tuniao" :custom-style="avatarCustomStyle"></tn-avatar>
        <tn-avatar shadow type="warning" :custom-style="avatarCustomStyle">UI</tn-avatar>
        <tn-avatar shadow type="danger" icon="logo-tuniao" :custom-style="avatarCustomStyle"></tn-avatar>
        <tn-avatar shadow type="info" :custom-style="avatarCustomStyle">UI</tn-avatar>
      </view>
      <view class="tn-flex-row tn-flex-center-start">
        <tn-avatar shadow :custom-style="avatarCustomStyle">UI</tn-avatar>
        <tn-avatar shadow shadow-color="tn-shadow-indigo--light" bg-color="transparent" color="tn-color-indigo" :custom-style="avatarCustomStyle">UI</tn-avatar>
      </view>
    </layout-content>

    <layout-content title="设置角标">
      <view class="tn-flex-row tn-flex-center-start">
        <tn-avatar icon="logo-tuniao" :custom-style="avatarCustomStyle" badge :badge-config="avatarBadge1"></tn-avatar>
        <tn-avatar shape="square" icon="logo-tuniao" :custom-style="avatarCustomStyle" badge :badge-config="avatarBadge1"></tn-avatar>
      </view>
      <view class="tn-flex-row tn-flex-center-start">
        <tn-avatar icon="logo-tuniao" :custom-style="avatarCustomStyle" badge>
          <template v-slot:badge>
            99+
          </template>
        </tn-avatar>
        <tn-avatar shape="square" icon="logo-tuniao" :custom-style="avatarCustomStyle" badge>
          <template v-slot:badge>
            99+
          </template>
        </tn-avatar>
      </view>
      <view class="tn-flex-row tn-flex-center-start">
        <tn-avatar icon="logo-tuniao" :custom-style="avatarCustomStyle" badge :badge-config="avatarBadge2">
          <template v-slot:badge>
            99+
          </template>
        </tn-avatar>
        <tn-avatar shape="square" icon="logo-tuniao" :custom-style="avatarCustomStyle" badge :badge-config="avatarBadge2">
          <template v-slot:badge>
            99+
          </template>
        </tn-avatar>
      </view>
      <view class="tn-flex-row tn-flex-center-start">
        <tn-avatar icon="logo-tuniao" :custom-style="avatarCustomStyle" badge :badge-config="avatarBadge3">
          <template v-slot:badge>
            99+
          </template>
        </tn-avatar>
        <tn-avatar shape="square" icon="logo-tuniao" :custom-style="avatarCustomStyle" badge :badge-config="avatarBadge3">
          <template v-slot:badge>
            99+
          </template>
        </tn-avatar>
      </view>
      <view class="tn-flex-row tn-flex-center-start">
        <tn-avatar icon="logo-tuniao" :custom-style="avatarCustomStyle" badge :badge-config="avatarBadge4"></tn-avatar>
        <tn-avatar icon="logo-tuniao" :custom-style="avatarCustomStyle" badge :badge-config="avatarBadge5"></tn-avatar>
      </view>
    </layout-content>

    <layout-content title="头像组">
      <view>
        <tn-avatar-group :data="avatarGroupData"></tn-avatar-group>
      </view>
      <view class="tn-margin-top-sm">
        <tn-avatar-group :data="avatarGroupData" :gap="0.3"></tn-avatar-group>
      </view>
      <view class="tn-margin-top-sm">
        <tn-avatar-group :data="avatarGroupData" size="sm"></tn-avatar-group>
      </view>
    </layout-content>
  </layout>

  <layout-doc v-model="showDoc" :content="docContent"></layout-doc>
  <doc-fab @click="handleDocFabClick"/>
</template>

<script lang="ts" setup>
import { ref, CSSProperties } from 'vue'
import { docContent } from './lib/doc'
import Layout from '@/components/layout/index.vue'
import LayoutContent from '@/components/layout/content.vue'
import LayoutDoc from '@/components/layout/doc.vue'
import DocFab from '@/components/doc-fab/index.vue'

import TnAvatar from '@/tuniao-ui/components/tn-avatar/src/Avatar.vue'
import TnAvatarGroup from '@/tuniao-ui/components/tn-avatar/src/AvatarGroup.vue'
import { AvatarBadgeConfig, AvatarGroupList } from '@/tuniao-ui/types'

// 自定义avatar样式
const avatarCustomStyle: CSSProperties = {
  marginTop: '20rpx',
  marginLeft: '20rpx'
}

// 弹出文档 
let showDoc = ref<boolean>(false)
const handleDocFabClick = () => {
  showDoc.value = true
}

// 头像角标设置
const avatarBadge1: AvatarBadgeConfig = {
  dot: true
}
const avatarBadge2: AvatarBadgeConfig = {
  bgColor: 'tn-bg-red',
  size: 'sm'
}
const avatarBadge3: AvatarBadgeConfig = {
  position: {
    top: '-2rpx',
    right: '2rpx'
  }
}
const avatarBadge4: AvatarBadgeConfig = {
  icon: 'sex-female',
  bgColor: 'tn-bg-red'
}
const avatarBadge5: AvatarBadgeConfig = {
  icon: 'sex-male',
  bgColor: 'tn-bg-indigo'
}

// 头像组数据
const avatarGroupData: AvatarGroupList[] = [
  {icon: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg'},
  {icon: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai2.jpg'},
  {icon: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai3.jpg'},
  {icon: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai4.jpg'},
  {icon: 'logo-tuniao'},
  {text: 'UI'},
  {
    text: 'UI',
    bgColor: 'transparent',
    color: 'tn-color-blue',
    border: true
  },
  {
    icon: 'logo-tuniao',
    bgColor: 'tn-bg-white',
    shadow: true,
    shadowColor: 'tn-shadow-indigo--light'
  },
  {
    text: 'UI',
    badge: true,
    badgeConfig: {
      text: '99+',
      size: 'sm'
    }
  },
  {
    text: 'UI',
    badge: true,
    badgeConfig: {
      icon: 'tag',
      size: 'sm'
    }
  }
]
</script>

<style lang="scss" scoped>
</style>
